<template>
  <div>
    <el-form :model="form">
      <el-form-item label="按角色接收">
        <el-switch v-model="form.roleFlag" @change="switchChangeRole"></el-switch>
      </el-form-item>
      <el-form-item v-if="form.roleFlag">
        <el-select multiple @change="emitInfo(value)" value-key="roleId" v-model="value" placeholder="请选择">
          <el-option v-for="item in roles" :key="item.roleId" :label="item.roleDesc" :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="按用户接收">
        <el-switch v-model="form.userFlag" @change="switchChangeUser"></el-switch>
      </el-form-item>
      <el-form-item v-if="form.userFlag">
        <el-select multiple filterable @change="emitInfo(value)" value-key="userId" v-model="value" placeholder="请选择">
          <el-option v-for="item in users" :key="item.userId"  :label="item.nickName" :value="item">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "CcNodeConfig",
  props:{
    config:{
      type: Object,
      default: ()=>{
        return {}
      }
    }
  },
  computed:{
    select: {
      get(){
        return this.config.assignedUser || []
      },
      set(val){
        this.config.assignedUser = val
      }
    },
  },
  data() {
    return {
      form: {
        roleFlag: true,
        userFlag: false,
      },
      value:[],
      roles: [],
      users:[]
    }
  },
  methods: {
    emitInfo(info) {
      console.log(info)
      let weight=0
      let flag=this.form.roleFlag
      let obj = []
      info.forEach(item=>{
        obj.push({
        id: flag?item.roleId:item.userId,
        name: flag?item.roleDesc:item.nickName,
        type: flag ? "ROLE" : "ASSIGN_USER"
      })
      if(weight<item.weight)weight=item.weight
      })
      this.$store.commit('setWeight',weight)
      this.selected(obj)
    },
    switchChangeRole(v){
     this.form.userFlag=!v
     this.value=[]
     this.select=[]
    },
    switchChangeUser(v){
     this.form.roleFlag=!v
     this.value=[]
     this.select=[]
    },
    selectOrg() {
      this.$refs.orgPicker.show()
    },
    selected(select) {
      this.select = Object.assign([], select)
    },
    removeOrgItem(index){
      this.select.splice(index, 1)
    },
    async initOptions(){
      let roles=await this.$get('/api/reception/roles')
      let users=await this.$get('/api/users/list')
      this.roles=roles.data
      this.users=users.data
      if(Object.keys(this.config).length>0){
        this.form.roleFlag=this.config.assignedUser[0].type=='ROLE'?true:false
        this.form.userFlag=this.config.assignedUser[0].type=='ROLE'?false:true
        this.config.assignedUser.forEach(item=>{
          if(this.config.assignedUser[0].type=='ROLE'){
            this.roles.forEach(items=>{
              if(item.id==items.roleId) this.value.push(items)
            })
          }else{
            this.users.forEach(items=>{
              if(item.id==items.userId) {
                this.value.push(items)
                console.log(items)
              }
            })
          }
        })
      }
    },
  },
  created() {
    this.initOptions()
    console.log(Object.keys(this.config).length)
    // Object.keys(this.config).length==0?this.value=[]:this.value=JSON.parse(JSON.stringify(this.config.assignedUser))
    
  }
}
</script>

<style lang="scss" scoped>
.option{
  color: #606266;
  margin-top: 20px;
  font-size: small;
}

.desc{
  font-size: small;
  color: #8c8c8c;
}
.org-item{
  margin: 5px;
}
</style>
